<template>
  <div>
    <el-row class="elrow" :gutter="20">
      <el-col :span="4">
        <el-input v-model="queryParam.name" placeholder="请输入品牌名称" style="margin-left: 20px" />
      </el-col>
      <el-col :span="10">
        <el-button type="primary" style="margin-left: 20px" @click="showAddBrandModal">新增</el-button>
        <el-button type="default" style="margin-left: 20px" @click="initData">查询</el-button>
        <el-button type="default" style="margin-left: 20px" @click="resetQuery">重置</el-button>
        <el-button type="default" style="margin-left: 20px" @click="exportExcel">导出</el-button>
      </el-col>
    </el-row>
    <el-row class="elrow">
      <el-table :data="brandListData" style="width: 85vw">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="description" label="备注" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editBrand(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteBrand(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="elrow">
      <el-pagination
        :current-page.sync="current"
        :page-size="size"
        :page-sizes="pageSizeOptins"
        layout="total, prev, pager, next, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <el-dialog :title="'新增 / 编辑分类'" :visible.sync="dialogVisible" width="50%" @close="handleClose">
      <!-- 对话框内容 -->
      <!-- <p>这里是对话框内容</p> -->
      <el-row>
        <el-form ref="brandForm" :model="brandForm" label-width="120px">
          <el-form-item label="名称">
            <el-input v-model="brandForm.name" style="width: 25vw" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="brandForm.description" style="width: 25vw" />
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 对话框底部操作栏 -->
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrUpdateBrand">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBrandListPageApi, addBrandApi, updateBrandApi, deleteBrandApi, exportExcelApi } from "@/api/product/brand";
export default {
  name: "Brand",
  data() {
    return {
      message: "品牌管理",
      currentBrandId: 0,
      dialogVisible: false,
      queryParam: {
        name: "",
      },
      brandForm: {
        name: "",
        description: "",
      },
      brandListData: [],
      current: 1,
      size: 10,
      total: 0,
      pageSizeOptins: [10, 20, 30, 40, 50],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    exportExcel() {
      exportExcelApi("brand").then((res) => {
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel",
        });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "品牌信息.xlsx"; // 设置下载的文件名
        link.click(); // 模拟点击下载

        // 释放掉blob URL，防止内存泄漏
        setTimeout(() => {
          window.URL.revokeObjectURL(url);
        }, 0);
      });
    },
    submitAddOrUpdateBrand() {
      if (this.currentBrandId === 0) {
        // 新增
        const params = {
          name: this.brandForm.name,
          description: this.brandForm.description,
        };
        addBrandApi(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("新增成功");
            this.dialogVisible = false;
            this.initData();
          } else {
            this.$message.error("新增失败");
          }
        });
      } else {
        // 修改
        const params = {
          id: this.currentBrandId,
          name: this.brandForm.name,
          description: this.brandForm.description,
        };
        updateBrandApi(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("编辑成功");
            this.dialogVisible = false;
            this.initData();
          } else {
            this.$message.error("编辑失败");
          }
        });
      }
    },
    deleteBrand(r) {
      const id = r.id + "";
      const params = {
        id,
      };
      deleteBrandApi(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.initData();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    showAddBrandModal() {
      // console.log("showAddBrandModal");
      this.currentBrandId = 0;
      this.brandForm = {
        name: "",
        description: "",
      };
      this.dialogVisible = true;
    },
    handleClose() {
      // console.log("handleClose");
      this.dialogVisible = false;
    },
    handleConfirm() {
      // console.log("handleConfirm");
    },
    handleSizeChange(val) {
      this.size = val;
      this.current = 1;
      this.initData();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.initData();
    },
    editBrand(r) {
      this.currentBrandId = r.id;
      this.brandForm = {
        name: r.name,
        description: r.description,
      };
      this.dialogVisible = true;
    },
    resetQuery() {
      this.queryParam = {
        name: "",
      };
      this.initData();
    },
    async initData() {
      const params = {
        name: this.queryParam.name,
        current: this.current,
        size: this.size,
      };
      const res = await getBrandListPageApi(params);
      if (res.code !== 200) {
        return this.$message.error("请求失败");
      }
      this.brandListData = res.data.records;
      this.total = res.data.total;
    },
  },
};
</script>

<style scoped>
.elrow {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
